<template>
  <div class="check-area">
    <c-table-box class="area" checkbox hide-func :data="tableData" :click-row-selection="false" :table-span-method="spanMethod" :table-config="tableConfig" @selection-change="selectionChange">
      <template v-if="$route.query.door !== 'yes'" #btn>
        <AddArea style="margin-right:10px;" :filters-raw="filtersRaw" @on-change="changeHandle" />
        <c-button type="primary" @click="removeHandle">删除</c-button>
      </template>
    </c-table-box>
  </div>
</template>
<script>
import AddArea from './addArea'
import { getSeriesByAccId } from '@/api/check'
import { otherFiltersItem } from '@/utils'
const finished = ['Q014', 'Q0015', 'Q009']
export default {
  name: 'CheckArea',
  components: {
    AddArea
  },
  data() {
    return {
      tableData: [],
      tableConfig: {
        interfacePath: '',
        pageFlag: false,
        setting: [
          {
            prop: 'areaName',
            label: '所属区域'
          },
          {
            prop: 'spaceName',
            label: '所属空间'
          },
          {
            prop: 'isProgramOutpic',
            label: '是否出图'
          },
          {
            prop: 'actualOutpicArea',
            label: '出图面积'
          },
          {
            prop: 'spaceAcceptArea',
            label: '验收面积'
          },
          {
            prop: 'spaceAcceptDesc',
            label: '验收说明'
          },
          {
            prop: 'styleName',
            label: '所属专区'
          },
          {
            prop: 'styleActualOutpicArea',
            label: '出图面积'
          },
          {
            prop: 'assortCustomizedArea',
            label: '配套定制出图面积'
          },
          {
            prop: 'styleAcceptArea',
            label: '验收面积'
          },
          {
            prop: 'assortAcceptArea',
            label: '配套定制验收面积'
          },
          {
            prop: 'styleAcceptDesc',
            label: '验收说明'
          },
          {
            prop: 'seriesName',
            label: '产品系列'
          },
          {
            prop: 'collocationName',
            label: '配套定制系列'
          },
          {
            prop: 'assortCupboardSeriesName',
            label: '配套橱柜系列'
          },
          {
            prop: 'isDetailOutpic',
            label: '是否出图'
          },
          {
            prop: 'isAccept',
            label: '是否验收'
          }
        ]
      },
      selections: [],
      // 过滤条件
      filtersRaw: [
        // 一下不能选择
        otherFiltersItem('areaCode', 'Q014', '<>'),
        otherFiltersItem('areaCode', 'Q015', '<>'),
        otherFiltersItem('areaCode', 'Q002', '<>'),
        otherFiltersItem('areaCode', 'Q003', '<>'),
        otherFiltersItem('areaCode', 'Q004', '<>'),
        otherFiltersItem('areaCode', 'Q005', '<>'),
        otherFiltersItem('enable', 1, '=')
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 处理数据
    handlerData(data) {
      const t = {}
      for (const item of data) {
        const key = item.areaCode
        if (t[key] === undefined) {
          t[key] = []
        }
        // 设置默认值
        item.acceptArea ? '' : item.acceptArea = 0
        item.acceptSeriesArea ? '' : item.acceptSeriesArea = 0
        item.actualOutpicArea ? '' : item.actualOutpicArea = 0
        item.assortCustomizedArea ? '' : item.assortCustomizedArea = 0
        item.seriesOutpicArea ? '' : item.seriesOutpicArea = 0
        if (finished.includes(item.areaCode)) {
          item.seriesEdit = true
        }
        item.acceptId ? '' : item.acceptId = this.$route.query.id
        t[key].push(item)
      }

      // 按照方案合并
      const result = []
      for (const [k, v] of Object.entries(t)) {
        const programs = {}
        for (let i = 0; i < v.length; i++) {
          const item = v[i]
          if (i === 0) {
            item.areaSpanRow = v.length
            item.areaSpanColumn = 1
          } else {
            item.areaSpanRow = 0
            item.areaSpanColumn = 0
          }
          const key = item.programId || item.programName
          if (programs[key] === undefined) {
            programs[key] = []
          }
          programs[key].push(item)
        }
        // 按照方案合并
        // eslint-disable-next-line no-unused-vars
        for (const [k, v] of Object.entries(programs)) {
          v.forEach((e, i) => {
            if (i === 0) {
              e.programSpanRow = v.length
              e.programSpanColumn = 1
            } else {
              e.programSpanRow = 0
              e.programSpanColumn = 0
            }
            e.group = v
            result.push(e)
          })
        }
      }
      return result
    },
    getData() {
      const { id } = this.$route.query
      getSeriesByAccId(id).then(res => {
        this.tableData = this.handlerData(res.data || [])
      })
    },
    // 选择区域
    changeHandle(v) {
      v = v.map(e => {
        return {
          acceptArea: 0, // 验收面积
          acceptDesc: '',	// 验收说明
          acceptId: this.$route.query.id,	// 门店验收ID
          acceptSeriesArea: '',
          acceptSeriesDesc: '',
          actualOutpicArea: '',
          areaName: e.areaName,
          assortCustomizedArea: '',
          areaCode: e.areaCode,
          configProgramSeriesId: '',
          isConstRangeAccept: '',
          outpicDesc: '',
          programName: '',
          seriesName: '',
          seriesOutpicArea: '',
          types: 1
        }
      })
      const t = [...this.tableData, ...v]
      this.tableData = this.handlerData(t)
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        return {
          rowspan: row.areaSpanRow,
          colspan: row.areaSpanColumn
        }
      } else if ([3, 4, 5, 6].includes(columnIndex)) {
        return {
          rowspan: row.programSpanRow,
          colspan: row.programSpanColumn
        }
      }
      return {
        rowspan: 1,
        colspan: 1
      }
      // const indexs = [2, 3, 4, 5, 6]
      // if (indexs.includes(columnIndex)) {
      //   if (row.rowSpan !== 0) {
      //     return [row.rowSpan, 1]
      //   } else {
      //     return [0, 0]
      //   }
      // }
      // return [row.rowSpan, 1]
    },
    // 按区域id设置值
    setValueByConfigAreaId(row, ...args) {
      const group = row.group || []
      group.forEach(item => {
        for (const a of args) {
          const [k, v] = Object.entries(a)[0]
          this.$set(item, k, v)
        }
      })
      // for (const item of this.tableData) {
      //   if (row.areaCode === item.areaCode) {
      //     for (const a of args) {
      //       const [k, v] = Object.entries(a)[0]
      //       this.$set(item, k, v)
      //     }
      //   }
      // }
    },
    setAcceptArea(row) {
      if (!row.seriesEdit) {
        return
      }
      const group = row.group || []
      const acceptArea = group.map(e => {
        const n = parseFloat(e.acceptSeriesArea)
        return isNaN(n) ? 0 : n
      }).reduce((p, c) => p + c, 0)
      group.forEach(e => {
        this.$set(e, 'acceptArea', acceptArea)
      })
    },
    selectionChange(v) {
      this.selections = v
    },
    updateAcceptArea() {
      const t = new Set()
      for (const row of this.tableData) {
        if (t.has(row.group)) {
          continue
        }
        this.setAcceptArea(row)
        t.add(row.group)
      }
    },
    removeHandle() {
      if (this.selections.length === 0) {
        this.$message.warning('请选择数据！')
        return
      }
      this.tableData = this.handlerData(this.tableData.filter(e => !this.selections.includes(e)))
      this.updateAcceptArea()
      this.selections = []
    }
  }
}
</script>
<style lang="scss" scoped>
.check-area{
  .area{
    & /deep/ .el-table__row{
      background-color: #fff !important;
    }
    & /deep/ .hover-row{
      background-color: #fff !important;
    }
    & /deep/ td{
      background-color: #fff !important;
    }
  }
}
</style>
